<template>
    <el-card shadow="never" style="margin-top:20px;">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            active-text-color="#ffd04b"
            style="border-right: 0px solid white"
            :unique-opened="true">
            <el-menu-item index="/logout">
                <a
                    href="javascript:void(0)"
                    @click="logout"
                    style="color:#409EFF; text-decoration:none;"
                >
                    <p>{{$t('button.logout')}}</p>
                </a>
            </el-menu-item>

            <el-submenu v-for="m in menus" :index="m.id.toString()" :key="m.id">
                <template slot="title">
                    <span v-text="m.title"></span>
                </template>

                <el-menu-item v-for="sm in m.children" :index="sm.url" :key="sm.id">
                    <router-link :to="sm.url" style="color:#409EFF; text-decoration:none;">
                        <p>{{sm.title}}</p>
                    </router-link>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-card>
</template>

<script>
import Vue from "vue";

export default {
    name: `adminNavigator`,
    data: function() {
        return {
            menus: []
        };
    },
    computed: {
        activeIndex() {
            this.$store.state.adminmenuactiveindex = this.$route.path;
            return this.$route.path;
        }
    },
    mounted: function() {
        Vue.axios
            .get(`/api/admin/adminmenu/query/listAdminMenusByUser`)
            .then(response => {
                //console.log(JSON.stringify(response));
                if (response.status === 200) {
                    this.menus = response.data;
                    return;
                }
                throw error;
            })
            .catch(error => {
                //console.log(JSON.stringify(error));
                this.$router.push("/ui/login");
            });
    },
    methods: {
        logout() {
            Vue.axios.get(`/logout`).catch(() => {
                this.$router.push("/ui/login");
            });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.el-menu-item.is-active {
    background-color: rgb(231, 235, 240) !important;
}
</style>
